<template>
  <div style="width: 102%">
    <el-table :data="orderList" style="width: 102%" row-key="id">
      <el-table-column prop="phone" label="预留电话"></el-table-column>
      <el-table-column prop="orderTime" label="下单时间"></el-table-column>
      <el-table-column prop="orderNum" label="订单号"></el-table-column>
      <el-table-column prop="goodsName" label="下单餐品"></el-table-column>
      <el-table-column prop="price" label="总价"></el-table-column>
      <el-table-column prop="tableNum" label="桌号"></el-table-column>
      <el-table-column prop="status" label="订单状态"></el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
    
    
    <script>
export default {
  data() {
    return {
      currentPage: 1,
      pagesize: 10,
      total: 0,

      userInfo: {},
      orderList: [],
    };
  },

  mounted() {
    const info = JSON.parse(localStorage.getItem("user"));
    this.userInfo = info;
    this.querypageByName();
  },

  methods: {
    querypageByName: async function() {
                    let result = await this.$http.get("/order/page/current/" +this.currentPage+"/size/" +this.pagesize+"/userName/" +this.userInfo.userName);
                    this.orderList = result.data.list;
                    this.total = result.data.total;
                },
    showOrderTable() {
      console.log(this.userInfo);
      this.$http
        .get("/order/byuser/" + this.userInfo.userName)
        .then((response) => {
          if (response.status === 200) {
            this.orderList = response.data;
          } else {
            console.error("API返回的数据不是有效数组:", response.data);
          }
        })
        .catch((error) => {
          console.error("请求订单数据失败:", error);
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.querypageByName();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.querypageByName();
    },
  },
};
</script>
    
    <style scoped>
</style>